<template>
  <div>
    <van-nav-bar
      fixed
      title="分类编辑"
      left-arrow
      :right-text="rightText"
      class="bg-white"
      @click-left="closeClassifyList"
      @click-right="sort"			
    />
    <div v-show="!sortable" class="has-top">
      <div v-show="activeClassifyList.length>0" class="br-12 mg-25 pd-25 pb-0 bg-white">
        <h3 class="item-tle">已储存的分类名称</h3>
        <ul>
          <li v-for="(item,index) in activeClassifyList" :key="index" class="pop-classify-litem flex-s-c">
            <p class="flex-1">{{ item.Name }}</p>
            <div class="flex-s-0">
              <svg-icon icon-class="edit" class="fs-32 " @goPage="openEditDialog(index)" />
              <svg-icon icon-class="delete" class="fs-32 color-danger ml-40" @goPage="openDeleteDialog(index)" />
            </div>
          </li>
        </ul>
      </div>
      <div class="br-12 mg-25 pd-25 bg-white">
        <h3 class="item-tle">添加分类</h3>
        <div class="mt-15 pos-r">
          <input v-model="newClassifyName" type="text" class="input" placeholder="请输入分类名称">
          <button class="btn" @click="addClassify">添加</button>
        </div>
      </div>
      <div class="mtb-70 mlr-40">
        <button class="btn-large color-white bg-second" @click="save">保存</button>
      </div>
    </div>
    <div v-show="sortable" class="has-top">
      <div class="br-12 mg-25 plr-25  bg-white">
        <draggable v-show="sortable" v-model="activeClassifyList" :options="options">
          <div v-for="(item,index) in activeClassifyList" :key="index" class="pop-classify-litem flex-s-c pos-r">
            <p class="flex-1 drag-item">{{ item.Name }}</p>
            <div class="upDown-box">
              <svg-icon v-show="index!==0" icon-class="up" class="fs-38 up" @goPage="up(index)" />
              <svg-icon v-show="index!==activeClassifyList.length-1" icon-class="down" class="fs-38 down" @goPage="down(index)" />
            </div>
          </div>
        </draggable>
      </div>
    </div>

    <!-- 修改分类名称弹窗 -->
    <van-dialog v-model="showEditDialog" :show-cancel-button="noshow" :show-confirm-button="noshow" class="dialog">
      <div class="plr-50 fs-28">
        <h2 class="tac fs-34 fw-500 pt-40 pb-20">修改分类名称</h2>
        <p class="pb-30  flex-v-c">
          <span class="color-gray-light flex-s-0">原分类名称：</span>
          <span class="pl-20">{{ oldClassifyName }}</span>
        </p>
        <p class="pb-30 flex-v-c">
          <span class="color-gray-light flex-s-0">修改后名称：</span>
          <input v-model="editClassifyName" class="input-1 flex-1" type="text" placeholder="请输入分类名称">
        </p>
      </div>
      <div class="ht fs-32 flex">
        <button class="flex-1 tac lh-100 hr dialog-btn" @click="cancleEdit">取消</button>
        <button class="color-primary flex-1 tac lh-100 dialog-btn" @click="editClassify">确定</button>
      </div>
    </van-dialog>
    <!-- 删除分类弹窗 -->
    <van-dialog v-model="showDeleteDialog" :show-cancel-button="noshow" :show-confirm-button="noshow" class="dialog">
      <div class="plr-50 fs-28">
        <h2 class="tac fs-34 fw-500 pt-40 pb-20">提示</h2>
        <p class="pb-30  tac">删除后，该分类下的商品将转移至【未分类】目录中 </p>
      </div>
      <div class="ht fs-32 flex">
        <button class="flex-1 tac lh-100 hr dialog-btn" @click="cancleDelete">取消</button>
        <button class="color-primary flex-1 tac lh-100 dialog-btn" @click="deleteClassify">删除</button>
      </div>
    </van-dialog>
    <!-- 返回提示弹窗 -->
    <van-dialog v-model="showBackDialog" :show-cancel-button="noshow" :show-confirm-button="noshow" class="dialog">
      <div class="plr-50 fs-28">
        <h2 class="tac fs-34 fw-500 pt-40 pb-20">提示</h2>
        <p class="pb-30  tac">修改内容尚未保存，是否保存？ </p>
      </div>
      <div class="ht fs-32 flex">
        <button class="flex-1 tac lh-100 hr dialog-btn" @click="back">返回</button>
        <button class="color-primary flex-1 tac lh-100 dialog-btn" @click="save">保存</button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { EditStoreProductCategoryByList } from 'api/store'
export default {
  name: 'ProductClassifyEdit',
  components: {
    draggable
  },
  props: {
    // 头部搜索类型
    type: {
      type: String,
      default: 'primary'
    },
    classifyList: {
      type: Array,
      required: true
    },
    locationCity: {
      type: String
    }
  },
  data() {
    return {
      options: {
        // delay: 100,
        group: 'product',
        delayOnTouchOnly: true,
        animation: 150,
        handle: '.drag-item'
      },
      rightText: '排序',
      sortable: false,
      activeIndex: 6,
      showEditDialog: false,
      showDeleteDialog: false,
      showBackDialog: false,
      newClassifyName: '',
      oldClassifyName: '',
      oldClassifyIndex: '', // 修改的分类序号
      deleteClassifyIndex: '', // 删除的分类序号
      editClassifyName: '',
      noshow: false,
      activeClassifyList: []
    }
  },
  created() {
    this.activeClassifyList = JSON.parse(JSON.stringify(this.classifyList))

    if (JSON.stringify(this.activeClassifyList) === JSON.stringify(this.classifyList)) {
      console.log(1)
    }
  },
  methods: {
    search() {
      // console.log(this.searchValue);
      this.$emit('search', this.searchValue)
    },
    back() {
      this.showBackDialog = false
      this.activeClassifyList = JSON.parse(JSON.stringify(this.classifyList))
      this.$emit('closeClassifyList', false)
    },
    closeClassifyList() {
      if (JSON.stringify(this.activeClassifyList) !== JSON.stringify(this.classifyList)) {
        this.showBackDialog = true
        return
      }
      this.$emit('closeClassifyList', false)
    },
    // 打开修改分类名称弹窗
    openEditDialog(index) {
      this.oldClassifyIndex = index
      this.oldClassifyName = this.activeClassifyList[index].Name
      this.showEditDialog = true
    },
    // 确认编辑
    editClassify() {
      if (this.editClassifyName) {
        if (this.isExist(this.editClassifyName)) {
          this.$toast('分类名称已存在')
          this.editClassifyName = ''
          return
        }
        this.activeClassifyList[this.oldClassifyIndex].Name = this.editClassifyName
        this.editClassifyName = ''
        this.showEditDialog = false
      } else {
        this.$toast('请输入分类名称')
      }
    },
    // 取消编辑
    cancleEdit() {
      this.editClassifyName = ''
      this.showEditDialog = false
    },
    // 打开删除分类弹窗
    openDeleteDialog(index) {
      this.deleteClassifyIndex = index
      this.showDeleteDialog = true
    },
    // 取消删除
    cancleDelete() {
      this.deleteClassifyIndex = ''
      this.showDeleteDialog = false
    },
    // 确定删除
    deleteClassify() {
      this.activeClassifyList.splice(this.deleteClassifyIndex, 1)
      this.deleteClassifyIndex = ''
      this.showDeleteDialog = false
    },
    // 新增分类
    addClassify() {
      if (this.newClassifyName) {
        if (this.isExist(this.newClassifyName)) {
          this.$toast('分类名称已存在')
          this.newClassifyName = ''
          return
        }
        var item = {}
        item.Name = this.newClassifyName
        item.Id = 0
        this.activeClassifyList.push(item)
        this.newClassifyName = ''
				this.save()
      } else {
        this.$toast('请输入分类名称')
      }
    },
    // 判断新增（修改）的分类名是否已存在
    isExist(name) {
      const list = this.activeClassifyList
      if (list.length) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].Name === name) {
            return true
          }
        }
        return false
      }
    },
    // 排序进入/确认
    sort() {
      if (this.sortable) {
        console.log('需要调用上传接口')
        // 需要调用上传接口
      }
      this.sortable = !this.sortable
      this.rightText = this.sortable ? '完成' : '排序'
    },
    // 上移
    up(index) {
      const list = this.$utils.arraySort(index, 'up', this.activeClassifyList)
      if (list) {
        this.activeClassifyList = list
        this.$forceUpdate()
      }
    },
    // 下移
    down(index) {
      const list = this.$utils.arraySort(index, 'down', this.activeClassifyList)
      if (list) {
        this.activeClassifyList = list
        this.$forceUpdate()
      }
    },
    save() {
      if (JSON.stringify(this.activeClassifyList) === JSON.stringify(this.classifyList)) {
        this.showBackDialog = false
        this.$toast.success('保存成功')
        this.$emit('closeClassifyList', false)
      } else {
        EditStoreProductCategoryByList(this.activeClassifyList).then(res => {
          if (res) {
            this.showBackDialog = false
            this.$toast.success('保存成功')
            this.$emit('closeClassifyList', true)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.item-tle{
  font-weight: 500;
  font-size: 28px;
  color: #000;
  position: relative;
}
.input{
  width: 100%;
  border-radius: 12px;
  padding: 0 150px 0 20px;
  background: $colorF7;
  line-height: 80px;
}
.btn{
  line-height: 80px;
  padding: 0;
  width: 150px;
  font-size: 28px;
  border-radius: 0 12px 12px 0;
  @include bg-primary();
  color:$colorF;
  position: absolute;
  top: 0;
  right: 0;
}
.pop-classify-litem{
  &:not(:last-child){
    border-bottom: 1px solid #e6e6e6;
  }
  p{
    font-size: 26px;
    line-height: 98px;
  }
}
.upDown-box{
  position: absolute;
  bottom: 32px;
  right: 22px;
  width: 110px;
  height: 40px;
  .up{
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .down{
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.dialog{
  /deep/.van-dialog__confirm, .van-dialog__confirm:active{
    @include color-primary();
  }
  .input-1{
    line-height: 3;
    padding: 0 20px;
    background: $colorF7;
    border-radius: 12px;
  }
  .dialog-btn{
    background: $colorF;
    &:active{
      background: $colorF7;
    }
  }
}
</style>

